<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css" />
    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <div class="container">
        <!-- Logo -->
        <img src="./images/taobao_logo.png" alt="" class="logo" />

        <div class="box">
            <!-- tab 栏 -->
            <div class="tabs">
                <div class="tab-active">宝贝</div>
                <div>店铺</div>
            </div>
            <!-- 搜索区域（搜索框和搜索按钮） -->
            <div class="search-box">
                <input type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">搜索</button>
            </div>
        </div>
    </div>

    <!-- 模板结构 -->
    <script type="text/html" id="tpl-suggestList">
        {{each result}}
        <div class="suggest-item">{{$value[0]}}</div>
        {{/each}}
    </script>

    <script>
        // 监听文本框的 keyup 事件
        $(".ipt").on("keyup", function() {
            // 获取用户输入的内容
            var keywords = $(this).val().trim();
            // 判断用户输入的内容是否为空
            if (keywords.length <= 0) {
                return;
            }
            // TODO：获取搜索建议列表
        });

        function getSuggestList(kw) {
            $.ajax({
                // 指定请求的 URL 地址，其中，q 是用户输入的关键字
                url: "https://suggest.taobao.com/sug?q=" + kw,
                // 指定要发起的是 JSONP 请求
                dataType: "jsonp",
                // 成功的回调函数
                success: function(res) {
                    console.log(res);
                },
            });
        }

        // 渲染建议列表
        function renderSuggestList(res) {
            // 如果没有需要渲染的数据，则直接 return
            if (res.result.length <= 0) {
                return $("#suggest-list").empty().hide();
            }
            // 渲染模板结构
            var htmlStr = template("tpl-suggestList", res);
            $("#suggest-list").html(htmlStr).show();
        }

        $("#ipt").on("keyup", function() {
            console.log(this);
            // 获取用户输入的内容
            var keywords = $(this).val().trim();
            // 判断用户输入的内容是否为空
            if (keywords.length <= 0) {
                // 如果关键词为空，则清空后隐藏搜索建议列表
                return $("#suggest-list").empty().hide();
            }
            getSuggestList(keywords);
        });
    </script>
</body>

</html>